<template>
  <el-dialog
    title="选择地址"
    :visible.sync="isShowDialog"
    width="1000px"
    top="50px" append-to-body>
    <div class="search">
      <el-input placeholder="请输入搜索地址信息" v-model="keyword" clearable @keyup.enter.native="searchAddress">
        <el-button slot="append" icon="el-icon-search" @click="searchAddress"></el-button>
      </el-input>
    </div>

    <div id="mapContainer" style="width: 100%; height: 350px"></div>

    <div class="address">
      <span>当前选点：</span>
      <b>{{nowAddress ? (nowAddress.addressComponents.province + nowAddress.addressComponents.city + nowAddress.addressComponents.district + nowAddress.addressComponents.streetNumber) : '尚未选点'}}</b>
      <el-button v-if="nowAddress" @click="selectAddress(nowAddress, 1)" type="text">【确认选择】</el-button>
    </div>

    <el-table
      highlight-current-row
      :data="nearPointList"
      height="300"
      style="width: 100%"
      class="table"
    >
      <el-table-column prop="address" label="附近推荐地点">
        <template slot-scope="scope">
          {{scope.row.address}}{{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click.native.prevent="selectAddress(scope.row, 2)" type="text">确认选择</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-dialog>
</template>
<script>

  export default {
    data() {
      return {
        keyword: '', // 搜索关键词
        nearPointList: [], // 附近地址
        isShowDialog: false, // 是否显示弹窗
        markersArray: [],
        geocoder: null,
        nowAddress: null, // 选择的地点
        geocoderLocation: null,
        countrySelect: "中国",
        provinceSelect: "山东",
        citySelect: "青岛"
      };
    },
    mounted() {

    },
    methods: {
      // 搜索地址
      searchAddress() {
        if (!this.keyword) {
          return this.$message.error("请输入搜索地址信息");
        }
        this.setLocationByAddress(this.keyword);
      },

      // 初始化地图
      initMap() {
        let that = this;
        let latLon = new qq.maps.LatLng(36.062030,120.384940);
        var map = new qq.maps.Map(document.getElementById("mapContainer"), {
          zoom: 13,
          center: latLon,
          mapTypeId: qq.maps.MapTypeId.ROADMAP,
        });
        var listener = qq.maps.event.addListener(map, 'click', function(event) {
          that.setLocationByLatLng(
            event.latLng.getLat(),
            event.latLng.getLng()
          );
        });
        // 经纬度解析类回调函数
        this.geocoder = new qq.maps.Geocoder({
          complete: function (result) {
            console.log(result.detail);
            that.nowAddress = result.detail;
            that.nearPointList = result.detail.nearPois;
            that.countrySelect = result.detail.addressComponents.country;
            that.provinceSelect = result.detail.addressComponents.province;
            that.citySelect = result.detail.addressComponents.city;
            map.setCenter(result.detail.location);
            // 标记点
            let marker = new qq.maps.Marker({
              map: map,
              position: result.detail.location,
            });
            that.markersArray.push(marker);
            if (that.markersArray.length > 1) {
              for (let i = 0; i < that.markersArray.length - 1; i++) {
                that.markersArray[i].setMap(null); // 清除标记
              }
            }
          },
        });
        // 地址解析回调函数
        this.geocoderLocation = new qq.maps.Geocoder({
          complete: function (result) {
            console.log(result.detail);
            // 查找附近的点
            that.countrySelect = result.detail.addressComponents.country;
            that.provinceSelect = result.detail.addressComponents.province;
            that.citySelect = result.detail.addressComponents.city;
            let latLng = new qq.maps.LatLng(
              result.detail.location.lat,
              result.detail.location.lng
            );
            that.geocoder.getAddress(latLng);
          },
        });
      },

      // 选择地址事件
      selectAddress(item, type) {
        if(type === 1) {
          let addressInfo = item.addressComponents;
          this.$emit(
            "on-select",
            addressInfo.province + addressInfo.city + addressInfo.district + addressInfo.streetNumber,
            item.location.lat,
            item.location.lng
          );
          this.isShowDialog = false;
        }
        if(type === 2) {
          this.$emit(
            "on-select",
            item.address + item.name,
            item.latLng.lat,
            item.latLng.lng
          );
          this.isShowDialog = false;
        }
      },

      // 显示地图
      show() {
        this.isShowDialog = true;
        setTimeout(() => {
          this.keyword = '';
          this.initMap();
        })
      },

      // 根据经纬度进行定位
      setLocationByLatLng(lat, lng) {
        setTimeout(() => {
          let latLng = new qq.maps.LatLng(lat, lng);
          this.geocoder.getAddress(latLng);
        })
      },
      // 根据地址信息进行定位
      setLocationByAddress(address) {
        setTimeout(() => {
          console.log('搜索地址：', address);
          this.geocoderLocation.getLocation(this.countrySelect+this.provinceSelect+this.citySelect+address);
        })
      },
    },
  };
</script>

<style scoped lang="scss">
  .search {
    margin-bottom: 15px;
    margin-top: -20px;
  }
  .address {
    margin-top: 15px;
    margin-bottom: 10px;
    .el-button {
      padding: 0;
    }
  }
  .table {
    .el-button {
      padding: 0;
    }
  }
</style>
